<template>
  <div class="securitySituationScreen">
    <div class="content">
      <div class="content_left">
        <div class="map_content">
          <div class="tips">
            <Icon
              type="md-pin"
              color="#1FB9FF"
              size="18"
              style="padding-right: 4px;"
            />
            <div class="defaultTip" @click="fnMapTipReturn('china')">
              中华人民共和国
            </div>
            <div
              v-for="(item, index) in history"
              :key="`drill-${index}`"
              style="margin-left: 6px;"
              :class="index == history.length - 1 ? 'nowTip' : 'defaultTip'"
              @click="fnMapTipReturn(item)"
            >
              >
              {{ item }}
            </div>
          </div>
          <div class="dimension">
            <div class="dimension_content">
              <div class="outer_ring">
                <div class="inner_ring"></div>
              </div>
              &nbsp;单位
            </div>
            <div class="dimension_content">
              <div><img src="./image/star.png" style="width: 20px;" /></div>
              <div>&nbsp;北京</div>
            </div>
          </div>
          <div class="asset_information">
            <div
              class="asset_card"
              v-for="(item, index) in mapRightData"
              :key="`asset-${index}`"
            >
              <div class="asset_number">{{ item.number }}</div>
              <div class="asset_name">
                <div
                  class="asset_icon"
                  :style="`background:${item.color};`"
                ></div>
                {{ item.name }}
              </div>
            </div>
          </div>
          <div
            class="center"
            id="china"
            style="width: 1300px;height: 650px;"
          ></div>
        </div>
        <div class="linear_contnet">
          <div class="linear_contnet_title">
            安全告警
          </div>
          <div class="linear_contnet_chart">
            <SecurityAlarmLine
              id="securityAlarmLine"
              class="line"
              ref="securityAlarmLineRef"
              :lineData="securityWarningData"
            >
            </SecurityAlarmLine>
          </div>
        </div>
      </div>
      <div class="content_right">
        <div class="right_card">
          <div class="right_card_title">
            <div class="right_card_name">资产总览</div>
          </div>
          <div class="right_card_content">
            <AssetOverview></AssetOverview>
          </div>
        </div>
        <div class="right_card">
          <div class="right_card_title">
            <div class="right_card_name">风险资产排行</div>
          </div>
          <div class="right_card_content">
            <RiskAssetRanking
              :id="`mapLine`"
              ref="decryptLine"
              :optData="decryptLineData"
            ></RiskAssetRanking>
          </div>
        </div>
        <div class="right_card">
          <div class="right_card_title">
            <div class="right_card_name">资产类型</div>
          </div>
          <div class="right_card_content">
            <pieCard
              :id="`mapPie`"
              class="pieCard"
              ref="decryptPie"
              :optData="decryptPieData"
            >
            </pieCard>
          </div>
        </div>
      </div>
    </div>
    <!-- 打点弹框 -->
    <div
      id="dotPop"
      class="dot_pop_model"
      v-if="dotPopShow"
      :style="`top:${dotPopTop}px;left:${dotPopLeft}px;`"
    >
      <div
        class="dot_pop_content"
        v-for="(item, index) in dotPopData"
        :key="`dot-pop-${index}`"
        @click="fnDotPop(item, index)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
import china from "./mapJson/china.json";
import chinaData from "./mapJson/chinaProvince.json";
import AssetOverview from "./components/assetOverview.vue";
import RiskAssetRanking from "./components/riskAssetRanking.vue";
import PieCard from "./components/pieCard.vue";
import SecurityAlarmLine from "./components/securityAlarmLine.vue";
export default {
  components: {
    AssetOverview,
    RiskAssetRanking,
    PieCard,
    SecurityAlarmLine,
  },
  data() {
    return {
      currentLevel: 0, //目前下钻层级
      endLevel: 2, //最深下钻层级
      provinceData: [], //需要下钻的省
      countryData: [], //市级信息
      nowDomainName: "china", //当前地图区域名
      chart: null,
      options: null,
      history: [], //下钻历史记录
      safetyManagementNodeData: [
        //安管节点打点数据
      ],
      organizationalUnitData: [
        //组织单位打点数据
      ],
      mapRightData: [
        {
          name: "已失陷资产",
          number: 4564,
          color: "#921A1C",
        },
        {
          name: "高风险资产",
          number: 4564,
          color: "#E41113",
        },
        {
          name: "低风险资产",
          number: 4564,
          color: "#EB9F0B",
        },
        {
          name: "建康资产",
          number: 4564,
          color: "#009B2C",
        },
      ],
      assetOverviewData: [
        //资产总览
      ],
      decryptLineData: [
        //风险资产排行
        { value: 540.365, name: "上城区" },
        { value: 440.365, name: "临平区" },
        { value: 340.365, name: "独墅区" },
        { value: 240.365, name: "余杭区" },
        { value: 140.365, name: "建德区" },
      ],
      decryptPieData: [
        //资产类型
        { value: 15, name: "网络设备", itemStyle: { color: "#DF6245" } },
        { value: 12, name: "密码设置", itemStyle: { color: "#26A8A0" } },
        { value: 35, name: "网络外设", itemStyle: { color: "#1E8FF8" } },
        { value: 25, name: "安全设置", itemStyle: { color: "#DFB91B" } },
        { value: 25, name: "计算设备", itemStyle: { color: "#5556EC" } },
      ],
      securityWarningData: {
        //安全警告
        category: [
          "2022.01",
          "2022.02",
          "2022.03",
          "2022.04",
          "2022.05",
          "2022.06",
          "2022.07",
          "2022.08",
        ],
        data: [
          [100, 132, 122, 134, 130, 185, 201, 220], //高风险
          [20, 102, 11, 44, 194, 120, 110, 50], //中风险
          [60, 12, 110, 230, 11, 170, 50, 90], //低风险
        ],
      },
      dotPopData: [], //弹框内数据
      dotPopShow: false,
      dotPopTop: 0,
      dotPopLeft: 0,
      ScreenContainerShow: true,
      params: {
        orgIdList: "",
      },
      zoom: 1.0,
      mapLineDataArr: [], //连线数据
      mapLineStatus: [], //连线数据status情况
    };
  },
  methods: {
    initCenterChart() {
      this.$echarts.registerMap("china", china);
      // 加载纹理图片
      let mapTexture = document.createElement("img");
      mapTexture.src = require("./image/chinese_map_texture.png");
      // 加载背景图

      this.options = {
        tooltip: {
          show: false,
        },
        //叠加阴影层
        geo: {
          map: "china",
          aspectScale: 0.8,
          layoutCenter: ["40%", "49.5%"],
          layoutSize: "100%",
          label: {
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            // areaColor: {
            //     type: "pattern",
            //     image: bgImg, //配置图片
            //     repeat: 'repeat'
            // },
            shadowColor: "#1253A0",
            shadowOffsetX: 0,
            shadowOffsetY: 15,
            // opacity: 0.8
          },
          emphasis: {
            areaColor: "#101B3B",
          },
          regions: [
            {
              name: "南海诸岛",
              itemStyle: {
                areaColor: "#101B3B",
                borderColor: "#101B3B",
                //normal: {
                opacity: 0,
                label: {
                  show: false,
                  color: "#009cc9",
                },
                //}
              },
              label: {
                show: false,
                color: "#FFFFFF",
                fontSize: 12,
              },
            },
          ],
        },
        animationDurationUpdate: 0, //优化地图漫游动画效果
        series: [
          {
            roam: true, // 开启地图漫游，支持鼠标滚轮缩放
            type: "map",
            selectedMode: "single",
            map: "china",
            aspectScale: 0.8,
            layoutCenter: ["40%", "50%"], //地图位置
            layoutSize: "100%",
            zoom: 1, //当前视角的缩放比例
            // roam: true, //是否开启平游或缩放
            scaleLimit: {
              //滚轮缩放的极限控制
              min: 1,
              max: 2,
            },
            label: {
              show: true,
              color: "#87B8DD",
              fontSize: 12,
              formatter: function(params) {
                if (params.name === "新疆维吾尔自治区") {
                  return "新疆";
                } else if (params.name === "澳门特别行政区") {
                  return "澳门";
                } else if (params.name === "香港特别行政区") {
                  return "香港";
                } else if (params.name === "宁夏回族自治区") {
                  return "宁夏";
                }
              },
            },

            itemStyle: {
              // areaColor: "#002E6B",
              // 渲染背景图片
              areaColor: {
                image: mapTexture,
                repeat: "repeat",
              },
              borderColor: "#ADD0ED",
              borderWidth: 1.2,
              shadowColor: "rgba(255, 255, 255, 0.4)", // 设置阴影颜色，带有透明度
              shadowBlur: 15, // 设置阴影的模糊大小
              shadowOffsetX: 2, // 设置阴影在 X 轴方向上的偏移
              shadowOffsetY: 2, // 设置阴影在 Y 轴方向上的偏移
            },
            emphasis: {
              //区域
              areaColor: "#ffeb3b", // 高亮时的颜色
              itemStyle: {
                areaColor: "#1785BF",
              },
              label: {
                show: true,
                color: "#fff",
              },
            },
          },
          {
            name: "组织单位",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: this.organizationalUnitData,
            symbolSize: function(val) {
              return 10;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            label: {
              show: true,
              color: "#000",
              formatter(value) {
                return "";
              },
              //}
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: "#4DEFFF",
                shadowBlur: 10,
                shadowColor: "#4DEFFF",
              },
            },
            zlevel: 1,
          },
          {
            //打点
            name: "北京",
            type: "scatter",
            coordinateSystem: "geo",
            symbol: "image://static/images/screen/star.png",
            symbolSize: [20, 20], // 设置图片大小
            data: [
              { name: "北京", value: [116.40717, 39.90469] }, // 北京的经纬度坐标
            ],
            label: {
              //normal: {
              show: false,
              color: "#fff",
              formatter(value) {
                return value.name;
              },
              //}
            },
            itemStyle: {
              color: "#D2691E", //标志颜色
            },
            zlevel: 10,
            z: 10,
          },
          {
            name: "lines",
            type: "lines",
            coordinateSystem: "geo",
            zlevel: 2,
            large: true,
            effect: {
              show: true, // 开启动态线条效果
              constantSpeed: 30, // 线条速度
              symbol: "pin", // 标记的图形，支持图片和文字
              symbolSize: 10, // 标记的大小
              trailLength: 0, // 动态线条的长度
              loop: true, // 是否循环动画效果
            },
            lineStyle: {
              normal: {
                color: function(params) {
                  // 根据 status 属性判断连线颜色
                  return params.data.status === 0 ? "#CE373F" : "#4DEFFF";
                },
                width: 2,
                opacity: 0.4,
                curveness: 0.2, // 曲线程度
              },
              emphasis: {
                opacity: 0.8,
                width: 5,
              },
            },
            data: this.mapLineDataArr,
          },
          {
            //打点
            name: "南海缩放图",
            type: "scatter",
            coordinateSystem: "geo",
            symbol: "image://static/images/screen/smallNH.png",
            symbolSize: [160, 210], // 设置图片大小
            data: [
              { name: "南海缩放图", value: [128.65909, 20.058951] }, // 南海缩放图的经纬度坐标
            ],
            itemStyle: {
              opacity: 1, // 设置不透明度为 1
            },
          },
        ],
      };
      const el = document.getElementById("china");
      this.chart = this.$echarts.init(el);

      this.chart.setOption(this.options);
      this.chart.on("georoam", (params) => {
        let options = this.chart.getOption();
        console.log("__options__", options);
        let pZoom = params.zoom;
        if (params.zoom != null && params.zoom != undefined) {
          //捕捉到缩放时
          this.options.geo.zoom = options.series[0].zoom;
          this.options.series[0].zoom = options.series[0].zoom;
          this.options.geo.center = options.series[0].center; //下层的geo的中心位置随着上层geo一起改变
          this.options.series[0].center = options.series[0].center; //下层的geo的中心位置随着上层geo一起改变
          this.options.series[4].symbolSize[0] = options.series[0].zoom * 160;
          this.options.series[4].symbolSize[1] = options.series[0].zoom * 210;
        } else {
          //捕捉到拖曳时
          this.options.geo.center = options.series[0].center; //下层的geo的中心位置随着上层geo一起改变
          this.options.series[0].center = options.series[0].center; //下层的geo的中心位置随着上层geo一起改变
        }
        this.chart.setOption(this.options);
      });
      // 注册双击事件
      this.chart.on("dblclick", (params) => {
        if (params.componentSubType == "map") {
          // 下钻事件进行下钻
          this.goDown(params.name);
        }
      });
      // 注册点击事件
      this.chart.on("click", (params) => {
        console.log("点击事件___", params);
        // 点击事件为安管节点
        if (params.componentSubType === "scatter") {
          this.dotPopTop = params.event.offsetY + 60;
          this.dotPopLeft = params.event.offsetX + 20;
          this.dotPopData = params.data.children;
          this.dotPopShow = true;
        } else if (params.componentSubType === "effectScatter") {
          this.dotPopTop = params.event.offsetY + 60;
          this.dotPopLeft = params.event.offsetX + 20;
          this.dotPopData = params.data.children;
          this.dotPopShow = true;
        } else if (params.componentSubType == "map") {
          //点击地图调用接口刷新数据
          this.dotPopShow = false;
        } else {
          this.dotPopShow = false;
        }
      });
    },
    async goDown(name) {
      console.log("当前下钻区域名", name);
      //先判断可不可以下钻
      if (this.currentLevel > 2) {
        return false;
      }
      if (this.currentLevel == this.endLevel) {
        return false;
      }

      //获取地图数据之后，修改地图options
      const mapname = name == ("中国" || "china") ? "china" : name;
      this.nowDomainName = mapname;
      if (mapname == "china") {
        this.$echarts.registerMap(mapname, china);
        this.options.geo.map = mapname;
        this.options.series[0].map = mapname;
        // 下钻后的缩放
        this.options.geo.layoutSize = "100%";
        this.options.series[0].layoutSize = "100%";
        this.chart.setOption(this.options);
        this.history = [];
        this.countryData = [];
        this.currentLevel = 0;
      } else {
        //判断下钻的是几级
        const goDownLevel = this.currentLevel + 1;
        if (goDownLevel == 1) {
          // 下钻省
          this.provinceData.forEach((element) => {
            if (name === element.fullname) {
              // const jsonData = []
              import("./mapJson/geometryProvince/" + element.id + ".json").then(
                (res) => {
                  console.log("_res__", res);
                  const newMapJson = res.default;
                  this.$echarts.registerMap(mapname, newMapJson);
                  this.options.geo.map = mapname;
                  this.options.series[0].map = mapname;
                  // 下钻后的缩放
                  this.options.geo.layoutSize = "60%";
                  this.options.series[0].layoutSize = "60%";
                  this.history.push(name);
                  this.chart.setOption(this.options);
                  this.currentLevel = 1;
                  this.countryData = res.features;
                }
              );
            }
          });
        } else {
          // 下钻市
          this.countryData.forEach((element) => {
            if (element.properties.name === mapname) {
              import(
                "./mapJson/geometryCouties/" + element.properties.id + "00.json"
              ).then((res) => {
                const newMapJson = res.default;
                this.$echarts.registerMap(mapname, newMapJson);
                this.options.geo.map = mapname;
                this.options.series[0].map = mapname;
                // 下钻后的缩放
                this.options.geo.layoutSize = "60%";
                this.options.series[0].layoutSize = "60%";
                this.history.push(name);
                this.chart.setOption(this.options);
                this.currentLevel = 1;
                this.countryData.push(res.features);
              });
            }
          });
        }
      }
    },
    // 此处后续可根据获取到的值进行获取
    getChinaProviceAndCityId() {
      //   let arr = this.safetyManagementNodeData.concat(
      //     this.organizationalUnitData
      //   );
      //   arr.forEach((element) => {
      //     for (const ele2 of chinaData.features) {
      //       // 省级信息查找存储
      //       if (element.provice === ele2.properties.name) {
      //         this.provinceData.push(ele2.properties);
      //         break;
      //       }
      //     }
      //   });

      console.log("__chinaData__", this.provinceData);
    },

    // tip页返回事件
    fnMapTipReturn(name) {
      console.log("_name__", name, this.nowDomainName);
      if (this.nowDomainName != name) {
        this.currentLevel = 0;
        this.history = [];
        this.goDown(name);
      }
    },
    fnDotPop(item, index) {
      console.log("__item__", item, index);
    },
  },
  mounted() {
    this.initCenterChart();
    this.getChinaProviceAndCityId();
    import("./mapJson/china.json").then((econom) => {
      // console.log("_econom__", econom);
      econom.features.forEach((element1) => {
        if (
          element1.properties.name != "台湾省" &&
          element1.properties.name != "内蒙古自治区" &&
          element1.properties.name != "海南省" &&
          element1.properties.name != "青海省"
        ) {
          this.organizationalUnitData.push({
            orgName: element1.properties.name,
            orgId: "112233",
            children: [],
            value: element1.properties.centroid,
            isHeadquarters: 0, //1总中心 0分中心或其他
          });
        }
        if (
          element1.properties.centroid &&
          element1.properties.name != "台湾省" &&
          element1.properties.name != "内蒙古自治区" &&
          element1.properties.name != "海南省" &&
          element1.properties.name != "青海省"
        ) {
          this.mapLineDataArr.push({
            name: `line`,
            fromName: `childPoint`,
            toName: `mainpoint`,
            coords: [element1.properties.centroid, [116.40717, 39.90469]],
            status: 1,
          });
        }
      });
      this.options.series[1].data = this.organizationalUnitData;
      this.chart.setOption(this.options);
    });

    console.log("__this.organizationalUnitData__", this.organizationalUnitData);
    // 子组件事件运行
    // this.$refs.decryptLine.fnDrawPie();
    // this.$refs.decryptPie.fnDrawPie();
    // this.$refs.securityAlarmLineRef.fnDrawPie();
    // this.$refs.securityAlarmLineRef.fnChangeRadioGroup("高风险");
  },
};
</script>

<style lang="less" scoped>
.securitySituationScreen {
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: #0f1733;
  overflow-y: auto;

  .header {
    padding: 20px 0 47px 47px;
    font-family: MicrosoftYaHei;
    font-size: 32px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 36px;
    letter-spacing: 3px;
    color: #fff;
    text-shadow: 0px 4px 7px #1784e6, 0px 9px 14px rgba(5, 38, 75, 0.7);
    font-weight: 800;
    background-image: url(./image/bg_title.png);
    background-repeat: round;
    height: 110px;

    div {
      transform: skewX(-10deg);
    }
  }

  .content {
    display: flex;
    justify-content: space-between;

    .content_left {
      position: relative;

      .map_content {
        position: relative;

        .tips {
          background: linear-gradient(to bottom right, #003c6f, #006aab);
          border: 1px solid #305a8c;
          border-radius: 4px;
          position: absolute;
          padding: 6px 10px;
          color: #7bb4e1;
          display: flex;
          align-items: center;
          left: 46px;
          font-size: 14px;
          z-index: 10;

          .nowTip {
            color: #c5ddec;
          }

          .defaultTip {
            cursor: pointer;
          }
        }

        .dimension {
          position: absolute;
          bottom: 160px;
          left: 60px;

          .dimension_content {
            color: #fff;
            display: flex;
            font-size: 13px;
            padding-bottom: 6px;
            z-index: 10;

            .outer_ring {
              width: 20px;
              height: 20px;
              border-radius: 50px;
              background-color: rgba(77, 239, 255, 0.4);

              .inner_ring {
                width: 14px;
                height: 14px;
                margin: 3px 0 0 3px;
                border-radius: 50px;
                background-color: #4defff;
              }
            }
          }
        }

        .asset_information {
          z-index: 10;
          position: absolute;
          right: 20px;
          color: #fff;

          .asset_card {
            padding: 12px 2px 4px 40px;
            margin-bottom: 20px;
            background-image: url(./image/bg_frame.png);
            background-repeat: round;

            .asset_number {
              // background: linear-gradient(to bottom right, #2F679C, #102548);
              padding: 0px 8px 4px 8px;
              font-size: 22px;
              font-weight: 700;
              width: 100px;
              font-family: DINAlternate-Bold;
            }

            .asset_name {
              display: flex;
              align-items: center;
              margin: 8px 0;
              font-size: 13px;
              color: #bedbff;

              .asset_icon {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                margin-right: 4px;
              }
            }
          }
        }
      }

      .linear_contnet {
        position: absolute;
        width: 1260px;
        bottom: 10px;
        height: 390px;
        left: 35px;

        .linear_contnet_title {
          padding: 18px 34px;
          font-family: MicrosoftYaHei;
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 32px;
          letter-spacing: 4px;
          color: #9ac4f5;
          font-weight: 600;
          display: flex;
          background-image: url(./image/bg_title3.png);
          background-repeat: round;
        }

        .linear_contnet_chart {
          background-color: #0e2043;
          width: 100%;
        }
      }
    }

    .content_right {
      .right_card {
        margin: 0 20px 20px 20px;

        .right_card_title {
          font-family: MicrosoftYaHei;
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 32px;
          letter-spacing: 4px;
          color: #9ac4f5;
          font-weight: 600;
          display: flex;
          background-image: url(./image/bg_title2.png);
          background-repeat: round;

          .right_card_name {
            padding: 10px 34px;
            transform: skewX(-6deg);
          }
        }

        .right_card_content {
          width: 550px;
          background: rgba(0, 56, 115, 0.13);
          border-radius: 4px;
        }
      }
    }
  }

  .dot_pop_model {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    background: #06084d85;
    color: #d1d9e3;
    border: 1px solid #1a4e88;

    .dot_pop_content {
      padding: 4px 12px;
      transition: background-color 0.3s ease;
      width: 136px;
    }

    .dot_pop_content:hover {
      background-color: #0e468588;
    }
  }
}
</style>
